<template>
  <div>
    <button @click="clickHandler">切换显式隐藏</button>
    <div>
      <input v-if="isEdit" type="text" ref="inputRef" />
      <h2 v-else>hello</h2>
    </div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      isEdit: false,
    };
  },
  methods: {
    clickHandler() {
      this.$nextTick(() => {
        this.$refs.inputRef.focus();
      });
      this.isEdit = !this.isEdit;
      /*
        $nextTick 异步任务
          是个微任务
        nextTick特点：
          多个nextTick只会开启一个微任务，所有的nextTick回调都在一个微任务里执行
        注意：
          vue中模板更新是异步任务，是使用nextTick开启一个微任务
      */
      // this.isEdit = !this.isEdit;
      // this.$nextTick()

      // 1 2 4 3
      /*
        第一个微任务：
          () => {
            console.log(1);
          }
        第二个微任务：
          flushCallbacks
        第三个微任务：
          () => {
            console.log(3);
          }
      */
      // Promise.resolve().then(() => {
      //   console.log(1);
      // });
      // this.$nextTick(() => {
      //   console.log(2);
      // });
      // Promise.resolve().then(() => {
      //   console.log(3);
      // });
      // this.$nextTick(() => {
      //   console.log(4);
      // });
    },
  },
};
</script>

<style lang="less" scoped></style>
